<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/flowbite@1.8.1/dist/flowbite.min.css" />
    <title>学生考试信息查看</title>
    <style>
        /* 侧边栏链接悬停动画 */
        .sidebar-link:hover {
            transform: translateX(5px);
            transition: transform 0.3s ease;
        }

        /* 按钮动画 */
        .btn {
            transition: background-color 0.3s ease;
        }

        /* 输入框聚焦样式 */
        input:focus,
        select:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
        }

        /* 整体浅蓝色背景 */
        body {
            background-color: #e0f7fa;
        }

        /* 左侧栏布局 */
        .sidebar {
            height: 100vh;
            width: 30%;
            background-color: #00838f;
            color: white;
            display: flex;
            flex-direction: column;
        }

        .sidebar-title {
            height: 15%;
            display: flex;
            align-items: center;
            padding: 0 1rem;
            font-size: 1.5rem;
            font-weight: bold;
        }

        .sidebar-item {
            height: 10%;
            display: flex;
            align-items: center;
            padding: 0 1rem;
            cursor: pointer;
        }

        /* 表格样式优化 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }

        th,
        td {
            border: 1px solid #ccc;
            padding: 0.5rem;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        /* 主内容区域的页面板块铺满设置 */
        .main-content-page {
            height: calc(100vh - 80px); /* 减去导航栏和页脚的高度 */
            overflow-y: auto;
        }
    </style>
</head>

<body class="flex h-screen">
<!-- 左侧栏 -->
<div class="sidebar">
    <div class="sidebar-title">学生端</div>
    <ul class="list-none p-0 flex flex-col flex-1">
        <li class="sidebar-item mb-2">
            <a href="#" onclick="showPage('examManagement')" class="sidebar-link text-white hover:bg-sky-400 rounded-md px-3 py-2 block h-full flex items-center">考试管理</a>
        </li>
        <li class="sidebar-item mb-2">
            <a href="#" onclick="showPage('examInfoQuery')" class="sidebar-link text-white hover:bg-sky-400 rounded-md px-3 py-2 block h-full flex items-center">考试信息查询</a>
        </li>
        <li class="sidebar-item mb-2">
            <a href="#" onclick="showPage('paperManagement')" class="sidebar-link text-white hover:bg-sky-400 rounded-md px-3 py-2 block h-full flex items-center">试卷管理</a>
        </li>
        <li class="sidebar-item mb-2">
            <a href="#" onclick="showPage('gradeManagement')" class="sidebar-link text-white hover:bg-sky-400 rounded-md px-3 py-2 block h-full flex items-center">成绩管理</a>
        </li>
    </ul>
</div>

<!-- 主内容区域 -->
<div class="w-7/10 flex flex-col">
    <!-- 导航栏 -->
    <nav class="bg-sky-600 p-4 text-white w-full">
        <div class="container mx-auto flex justify-between items-center">
            <h1 class="text-2xl font-bold">学生考试信息查看</h1>
            <ul class="flex space-x-4">
                <li><a href="#" class="hover:text-gray-300">首页</a></li>
                <li><a href="#" class="hover:text-gray-300">考试信息</a></li>
                <li><a href="#" class="hover:text-gray-300">成绩查询</a></li>
            </ul>
        </div>
    </nav>

    <div class="p-4 flex-1">
        <!-- 考试管理页面 -->
        <div id="examManagement" class="hidden main-content-page">
            <h2 class="text-xl font-bold mb-4">考试管理页面</h2>
            <p>在此页面可进行考试安排、监考人员分配等操作。</p>
            <table class="min-w-full bg-white border border-gray-300">
                <thead>
                <tr>
                    <th class="py-2 px-4 border-b">考试编号</th>
                    <th class="py-2 px-4 border-b">考试科目</th>
                    <th class="py-2 px-4 border-b">考试时间</th>
                    <th class="py-2 px-4 border-b">监考老师</th>
                    <th class="py-2 px-4 border-b">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="py-2 px-4 border-b">001</td>
                    <td class="py-2 px-4 border-b">大学英语</td>
                    <td class="py-2 px-4 border-b">2025-05-10 09:00 - 11:00</td>
                    <td class="py-2 px-4 border-b">张老师</td>
                    <td class="py-2 px-4 border-b">
                        <a href="#" class="text-blue-600 hover:underline">编辑</a>
                    </td>
                </tr>
                <tr>
                    <td class="py-2 px-4 border-b">002</td>
                    <td class="py-2 px-4 border-b">大学物理</td>
                    <td class="py-2 px-4 border-b">2025-05-12 14:00 - 16:00</td>
                    <td class="py-2 px-4 border-b">李老师</td>
                    <td class="py-2 px-4 border-b">
                        <a href="#" class="text-blue-600 hover:underline">编辑</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <!-- 考试信息查询页面 -->
        <div id="examInfoQuery" class="main-content-page">
            <h2 class="text-xl font-bold mb-4">考试信息查询</h2>
            <div class="mb-4">
                <label for="course" class="block text-gray-700 font-bold mb-2">选择课程:</label>
                <select id="course" class="border border-gray-300 p-2 w-full rounded-md">
                    <option value="all">所有课程</option>
                    <option value="english">大学英语</option>
                    <option value="physics">大学物理</option>
                    <option value="math">高等数学</option>
                </select>
            </div>
            <div class="mb-4">
                <label for="examDate" class="block text-gray-700 font-bold mb-2">选择考试日期:</label>
                <input type="date" id="examDate" class="border border-gray-300 p-2 w-full rounded-md">
            </div>
            <button class="bg-sky-600 text-white py-2 px-4 rounded-md hover:bg-sky-700 btn">查询</button>
            <table class="min-w-full bg-white border border-gray-300 mt-4">
                <thead>
                <tr>
                    <th class="py-2 px-4 border-b">考试科目</th>
                    <th class="py-2 px-4 border-b">考试开始时间</th>
                    <th class="py-2 px-4 border-b">考试结束时间</th>
                    <th class="py-2 px-4 border-b">教师名称</th>
                    <th class="py-2 px-4 border-b">考试状态</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="py-2 px-4 border-b">大学英语</td>
                    <td class="py-2 px-4 border-b">2025-05-10 09:00</td>
                    <td class="py-2 px-4 border-b">2025-05-10 11:00</td>
                    <td class="py-2 px-4 border-b">张老师</td>
                    <td class="py-2 px-4 border-b">未开始</td>
                </tr>
                <tr>
                    <td class="py-2 px-4 border-b">大学物理</td>
                    <td class="py-2 px-4 border-b">2025-05-12 14:00</td>
                    <td class="py-2 px-4 border-b">2025-05-12 16:00</td>
                    <td class="py-2 px-4 border-b">李老师</td>
                    <td class="py-2 px-4 border-b">未开始</td>
                </tr>
                <tr>
                    <td class="py-2 px-4 border-b">高等数学</td>
                    <td class="py-2 px-4 border-b">2025-05-15 09:30</td>
                    <td class="py-2 px-4 border-b">2025-05-15 11:30</td>
                    <td class="py-2 px-4 border-b">王老师</td>
                    <td class="py-2 px-4 border-b">未开始</td>
                </tr>
                </tbody>
            </table>
        </div>
        <!-- 试卷管理页面 -->
        <div id="paperManagement" class="hidden main-content-page">
            <h2 class="text-xl font-bold mb-4">试卷管理信息列表</h2>
            <p>此页面可管理试卷信息，包括试卷创建、修改和删除。</p>
            <table class="min-w-full bg-white border border-gray-300">
                <thead>
                <tr>
                    <th class="py-2 px-4 border-b">试卷编号</th>
                    <th class="py-2 px-4 border-b">考试科目</th>
                    <th class="py-2 px-4 border-b">题型数量</th>
                    <th class="py-2 px-4 border-b">总分</th>
                    <th class="py-2 px-4 border-b">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="py-2 px-4 border-b">001</td>
                    <td class="py-2 px-4 border-b">大学英语</td>
                    <td class="py-2 px-4 border-b">20</td>
                    <td class="py-2 px-4 border-b">100</td>
                    <td class="py-2 px-4 border-b">
                        <a href="#" class="text-blue-600 hover:underline">编辑</a>
                    </td>
                </tr>
                <tr>
                    <td class="py-2 px-4 border-b">002</td>
                    <td class="py-2 px-4 border-b">大学物理</td>
                    <td class="py-2 px-4 border-b">15</td>
                    <td class="py-2 px-4 border-b">100</td>
                    <td class="py-2 px-4 border-b">
                        <a href="#" class="text-blue-600 hover:underline">编辑</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <!-- 成绩管理页面 -->
        <div id="gradeManagement" class="hidden main-content-page">
            <h2 class="text-xl font-bold mb-4">成绩管理页面</h2>
            <p>此页面可进行成绩录入、修改和查询等操作。</p>
            <table class="min-w-full bg-white border border-gray-300">
                <thead>
                <tr>
                    <th class="py-2 px-4 border-b">学生编号</th>
                    <th class="py-2 px-4 border-b">学生姓名</th>
                    <th class="py-2 px-4 border-b">考试科目</th>
                    <th class="py-2 px-4 border-b">成绩</th>
                    <th class="py-2 px-4 border-b">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="py-2 px-4 border-b">001</td>
                    <td class="py-2 px-4 border-b">张三</td>
                    <td class="py-2 px-4 border-b">大学英语</td>
                    <td class="py-2 px-4 border-b">85</td>
                    <td class="py-2 px-4 border-b">
                        <a href="#" class="text-blue-600 hover:underline">编辑</a>
                    </td>
                </tr>
                <tr>
                    <td class="py-2 px-4 border-b">002</td>
                    <td class="py-2 px-4 border-b">李四</td>
                    <td class="py-2 px-4 border-b">大学物理</td>
                    <td class="py-2 px-4 border-b">78</td>
                    <td class="py-2 px-4 border-b">
                        <a href="#" class="text-blue-600 hover:underline">编辑</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-sky-200 p-4 text-center text-gray-600">
        &copy; 2025 在线考试系统. All rights reserved.
    </footer>
</div>

<script>
    function showPage(pageId) {
        const pages = ['examManagement', 'examInfoQuery', 'paperManagement', 'gradeManagement'];
        pages.forEach(page => {
            const element = document.getElementById(page);
            if (page === pageId) {
                element.classList.remove('hidden');
            } else {
                element.classList.add('hidden');
            }
        });
    }
</script>
</body>

</html>
